<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "Header",
  activated() {
    console.log("Header组件激活了")
    /*
   * activated:若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用
   * */
  },
  deactivated() {
    console.log("Header组件失活了")
    /*
    deactivated:若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
   */
  }
})
</script>

<template>
  <div class="header">
    我是头部组件
    <input type="text">

  </div>
</template>

<style scoped lang="less">
.header {
  width: 100%;
  height: 100px;
  background-color: cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
